<template>
    <div class="music" ref="Bs1">
        <h1>只因音乐</h1>
        <hr>
        <div class="serch">
            <input type="text" class="searhmusic" v-model="keyword" @keyup.enter="searchMusic"><button class="btn1" @click="searchMusic">搜索</button>
        </div>
        <div class="nav1">
            <router-link to="/results/消愁">搜索结果</router-link>
            <router-link to="/playmusic/10001">歌曲播放</router-link>
            <router-link to="/playMv/5431201">MV</router-link>
            <router-link to="/comment">评论</router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";

onMounted(()=>{
})
let keyword = ref("")
//搜索音乐跳并转路由
const searchMusic = ()=>{
    if(keyword.value===''){
        alert('输入内容不能为空')
        return
    }
    router.push({
        path:'/results/'+keyword.value,
    });
    //清空输入
    keyword.value=''
}

</script>

<style lang="scss" scoped>
.music {
    width: 1400px;
    height: 800px;
    border: 1px solid;
    margin: 0 auto;
}
.serch {
    display: flex;
    align-items: center;
    justify-content: center;
}
.searhmusic {
    border: none;
    outline: none;
    width: 500px;
    height: 40px;
    background-color: rgba(250, 244, 244, 0.5);
}
.btn1 {
    border: none;
    outline: none;
    color: rgb(10, 10, 10);
    width: 100px;
    height: 42px;
    background-color: rgb(214, 18, 155);
}
.nav1 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 80%;
    margin: 10px auto;
    height: 60px;
    background-image: linear-gradient(to right,rgb(228, 17, 228),rgb(145, 19, 218),rgb(103, 17, 216));
    a{
        text-align: center;
        line-height: 60px;
        width: 25%;
        height: 100%;
        text-decoration: none;
        color: white;
        &:hover{
            background-color: rgba(250, 244, 244, 0.5);
        }
    }
}

</style>